<style type="text/css">
    .error{
        border:1px solid red;

    }
    .success{
        border:1px solid #0f0;

    }
    .error-msg{
        color: #f00;
        display:none;
    }
</style>

<script type="text/javascript">
    /*
    function validateForm()
    {
        var first_name=document.forms["sign_up"]["first_name"].value;
        if (first_name==null || first_name=="")
        {
            alert("First name must be filled out");
            return false;
        }

        var last_name=document.forms["sign_up"]["last_name"].value;
        if (last_name==null || last_name=="")
        {
            alert("Last name must be filled out");
            return false;
        }
        var username=document.forms["sign_up"]["username"].value;
        if (username==null || username=="")
        {
            alert("Username must be filled out");
            return false;
        }
        var password=document.forms["sign_up"]["password"].value;
        if (password==null || password=="")
        {
            alert("Choose your password");
            return false;
        }
        var con_password=document.forms["sign_up"]["con_password"].value;
        if (con_password=!password || con_password=="")
        {
            alert("Password Mismatched");
            return false;
        }
        var email=document.forms["sign_up"]["email"].value;
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
        {
            alert("Not a valid e-mail address");
            return false;
        }
        var gender=document.forms["sign_up"]["gender"].value;
        if (gender==null || gender=="")
        {
            alert("Choose your gender");
            return false;
        }
         var dob=document.forms["sign_up"]["dob"].value;
        if (mm==null || dd==null || yy==null)
        {
            alert("Choose your Date of Birth");
            return false;
        }



    } */


    $(document).ready(function(){

        $('.form_input').keyup(function() {
            var value = $(this).val();
            if (value == "") {
                $(this).addClass("error");

                var label_text = $(this).prev("label").text();
                var error_message = label_text + " is required";

                $(this).next(".error-msg").text(error_message);
                $(this).next(".error-msg").fadeIn("slow");

            }else {
                $(this).removeClass("error");
                $(this).next(".error-msg").fadeOut("slow");
            }
        });



function check_username(){
    var username= $("#username").val();
    if (username!="")
        {
            //alert(username );
            $.ajax({
                type: "POST",
                url: "actions/ckeck_username.php",
                data: "username="+username,
                success: function(response){
                    
                   if(response=="err"){
                      alert("username alerady exist");
                  }else{
                      alert("username doest exist");
                  }
                   return false;
                  
                }
            });

<<<<<<< .mine
    });
=======
        }
        return false;
       
}
>>>>>>> .r59


    function validateForm() {


        //var first_name=document.forms["sign_up"]["first_name"].value;

        $(".form_input").removeClass("error");

        var first_name= $("#first_name").val();
        //var first_name= $("input[name='first_name']").val();


        if (first_name==null || first_name=="")
        {
            alert("First name must be filled out");
            $("#first_name").addClass("error");
            return false;
        }

        var last_name=$("#last_name").val();
        if (last_name==null || last_name=="")
        {
            $("#last_name").addClass("error");
            alert("Last name must be filled out");
            return false;
        }

        var username=$("#username").val();
        if (username==null || username=="")
        {
            $("#username").addClass("error");
            alert("Username must be filled out");
            return false;
        }


        var password=$("#password").val();
        if (password==null || password=="")
        {
            $("#password").addClass("error");
            alert("Choose your password");
            return false;
        }


        var con_password=$("#con_password").val();
        if (con_password!=password && con_password=="")
        {
            $("#con_password").addClass("error");
            alert("Password Mismatched");
            return false;
        }

        var email=$("#email").val();
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
        {
            alert("Not a valid e-mail address");
            return false;
        }


        var gender=$("#gender").val();
        if (gender==null || gender=="")
        {
            $("#gender").addClass("error");
            alert("Choose your gender");
            return false;
        }


        var mm=$("#mm").val();
        if (mm==null || mm=="")
        {
            $("#mm").addClass("error");
            alert("Choose your month");
            return false;
        }
        var dd=$("#dd").val();
        if (dd==null || dd=="" || dd =="Day")
        {
            $("#dd").addClass("error");
            alert("please providevalid day");
            return false;
        }

        var yy=$("#yy").val();
        if (yy=="" || yy==null || yy =="Year")
        {
            $("#yy").addClass("error");
            alert("Choose  valid year");
            return false;
        }     
        var country=$("#country").val();
        if (country=="" || country==null)
        {
            $("#country").addClass("error");
            alert("Choose  your country");
            return false;
        }
        /* var colz_work=$("#colz_work").val();
        if (colz_work=="" || colz_work==null)
        {
            $("#colz_work").addClass("error");
            alert("Choose  your College or Work");
            return false;
        }
        var website=$("#website").val();
        if (website=="" || website==null)
        {
            $("#website").addClass("error");
            alert("Provide your website");
            return false;
        }*/

    }
    function check_username(){
        var username=$("#username").val();
        if (username!=null || username!="")
        {
            //$("#username").addClass("error");
            //  alert(username);

            var data_to_send = "name=" + username;               
            
            $.ajax({
                type: "GET",
                url: "actions/check_username_action.php",
                data: data_to_send,
                success: function(resp){
                    // we have the response
                    //alert("Server said:\n '" + resp + "'");
                    if (resp == "SUCCESS"){
                        $("#username").addClass("success");
                    }else {
                        $("#username").addClass("error");
                    }
                    return false;
                },
                error: function(e){
                    alert('Error: ' + e);
                }
            });
            return false;
        }
    }

</script>
<div id="left_content">
    <img src="images/sample_logo.gif" >
</div>
<div id="right_content">
    <div id="right_content_top">
        <p>Please enter your information below</p>
    </div>
    <div id="right_content_bottom">
        <form name="sign_up" method="post" action="<?php echo "$action_path/signup_action.php"; ?>" onsubmit="return validateForm()">

            <label class="form_label">First Name:</label>
            <input class="form_input" type="text" name="first_name" id="first_name" value="" />
            <span class="error-msg">Error</span>
            <br/>
            <label class="form_label">*Mid Name:</label>
            <input class="form_input" type="text" name="mid_name" id="mid_name" value="" />
            <span class="error-msg">Error</span>
            <br/>
            <label class="form_label">Last Name:</label>
            <input class="form_input" type="text" name="last_name" id="last_name"  value="" />
            <span class="error-msg">Error</span>
            <br/>
            <label class="form_label">Susudo Username:</label>
            <input class="form_input" type="text" name="username" id="username" value="" />
<<<<<<< .mine
            <a href ="#" onclick="check_username()">Check Availability!</a>
=======
            <a href ="#" onclick="check_username();">Check Availability!</a>
>>>>>>> .r59
            <br/>
            <label class="form_label">Password:</label>
            <input class="form_input" type="password" name="password" id="password" value="" />
            <span class="error-msg">Error</span>
            <br/>

            <label class="form_label">Confirm Password :</label>
            <input class="form_input" type="password" name="con_password" id="con_password" value="" />
            <span class="error-msg">Error</span>
            <br/>

            <label class="form_label">Email:</label>
            <input class="form_input" type="text" name="email" id="email" value="" />
            <span class="error-msg">Error</span>
            <br/>
            <label class="form_label">Gender:</label>
            <select title="Gender" class="" id="gender" name="gender">
                <option value="" selected="selected">- Select One -</option>
                <option title="m" value="m">Male</option>
                <option title="f" value="f">Female</option>
            </select>
            <span class="error-msg">Error</span>
            <br/>

            <label class="form_label">Date of Birth:</label>
            <!--<input class="form_input" type="text" name="dob" value="" /><br/>-->

            <select title="- Select Month -" name="mm" id="mm" class="">
                <option value="" selected="selected">- Select Month -</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
            <input style="width:70px;" title="Day" name="dd" id="dd" value="Day" size="" maxlength="" autocomplete="off" type="text">
            <input style="width:90px;" title="Year" name="yy" id="yy" value="Year" size="" maxlength="" autocomplete="off" type="text">
            <span class="error-msg">Error</span>
            <br/>
            <label class="form_label" for="country">Country</label>
            <select class="" id="country" name="country">
                <option value="">Select One</option>
                <option value="af">Afghanistan</option>
                <option value="ax">Aland Islands</option>
                <option value="al">Albania</option>
                <option value="dz">Algeria</option>
                <option value="as">American Samoa</option>
                <option value="ad">Andorra</option>
                <option value="ao">Angola</option>
                <option value="ai">Anguilla</option>
                <option value="aq">Antarctica</option>
                <option value="ag">Antigua and Barbuda</option>
                <option value="ar">Argentina</option>
                <option value="am">Armenia</option>
                <option value="aw">Aruba</option>
                <option value="au">Australia</option>
                <option value="at">Austria</option>
                <option value="az">Azerbaijan</option>
                <option value="bs">Bahamas</option>
                <option value="bh">Bahrain</option>
                <option value="bd">Bangladesh</option>
                <option value="bb">Barbados</option>
                <option value="by">Belarus</option>
                <option value="be">Belgium</option>
                <option value="bz">Belize</option>
                <option value="bj">Benin</option>
                <option value="bm">Bermuda</option>
                <option value="bt">Bhutan</option>
                <option value="bo">Bolivia</option>
                <option value="ba">Bosnia and Herzegovina</option>
                <option value="bw">Botswana</option>
                <option value="bv">Bouvet Island</option>
                <option value="br">Brazil</option>
                <option value="io">British Indian Ocean Territory</option>
                <option value="vg">British Virgin Islands</option><option value="bn">Brunei</option><option value="bg">Bulgaria</option><option value="bf">Burkina Faso</option><option value="bi">Burundi</option><option value="kh">Cambodia</option><option value="cm">Cameroon</option><option value="ca">Canada</option><option value="cv">Cape Verde</option><option value="ky">Cayman Islands</option><option value="cf">Central African Republic</option><option value="td">Chad</option><option value="cl">Chile</option><option value="cn">China</option><option value="cx">Christmas Island</option><option value="cc">Cocos (Keeling) Islands</option><option value="co">Colombia</option><option value="km">Comoros</option><option value="cg">Congo</option><option value="ck">Cook Islands</option><option value="cr">Costa Rica</option><option value="hr">Croatia</option><option value="cu">Cuba</option><option value="cy">Cyprus</option><option value="cz">Czech Republic</option><option value="cd">Democratic Republic of Congo</option><option value="dk">Denmark</option><option value="xx">Disputed Territory</option><option value="dj">Djibouti</option><option value="dm">Dominica</option><option value="do">Dominican Republic</option><option value="tl">East Timor</option><option value="ec">Ecuador</option><option value="eg">Egypt</option><option value="sv">El Salvador</option><option value="gq">Equatorial Guinea</option><option value="er">Eritrea</option><option value="ee">Estonia</option><option value="et">Ethiopia</option><option value="fk">Falkland Islands</option><option value="fo">Faroe Islands</option><option value="fm">Federated States of Micronesia</option><option value="fj">Fiji</option><option value="fi">Finland</option><option value="fr">France</option><option value="gf">French Guyana</option><option value="pf">French Polynesia</option><option value="tf">French Southern Territories</option><option value="ga">Gabon</option><option value="gm">Gambia</option><option value="ge">Georgia</option><option value="de">Germany</option><option value="gh">Ghana</option><option value="gi">Gibraltar</option><option value="gr">Greece</option><option value="gl">Greenland</option><option value="gd">Grenada</option><option value="gp">Guadeloupe</option><option value="gu">Guam</option><option value="gt">Guatemala</option><option value="gn">Guinea</option><option value="gw">Guinea-Bissau</option><option value="gy">Guyana</option><option value="ht">Haiti</option><option value="hm">Heard Island and Mcdonald Islands</option><option value="hn">Honduras</option><option value="hk">Hong Kong</option><option value="hu">Hungary</option><option value="is">Iceland</option><option value="in">India</option><option value="id">Indonesia</option><option value="ir">Iran</option><option value="iq">Iraq</option><option value="xe">Iraq-Saudi Arabia Neutral Zone</option><option value="ie">Ireland</option><option value="il">Israel</option><option value="it">Italy</option><option value="ci">Ivory Coast</option><option value="jm">Jamaica</option><option value="jp">Japan</option><option value="jo">Jordan</option><option value="kz">Kazakhstan</option><option value="ke">Kenya</option><option value="ki">Kiribati</option><option value="kw">Kuwait</option><option value="kg">Kyrgyzstan</option><option value="la">Laos</option><option value="lv">Latvia</option><option value="lb">Lebanon</option><option value="ls">Lesotho</option><option value="lr">Liberia</option><option value="ly">Libya</option><option value="li">Liechtenstein</option><option value="lt">Lithuania</option><option value="lu">Luxembourg</option><option value="mo">Macau</option><option value="mk">Macedonia</option><option value="mg">Madagascar</option><option value="mw">Malawi</option><option value="my">Malaysia</option><option value="mv">Maldives</option><option value="ml">Mali</option><option value="mt">Malta</option><option value="mh">Marshall Islands</option><option value="mq">Martinique</option><option value="mr">Mauritania</option><option value="mu">Mauritius</option><option value="yt">Mayotte</option><option value="mx">Mexico</option><option value="md">Moldova</option><option value="mc">Monaco</option><option value="mn">Mongolia</option><option value="me">Montenegro</option><option value="ms">Montserrat</option><option value="ma">Morocco</option><option value="mz">Mozambique</option><option value="mm">Myanmar</option><option value="na">Namibia</option><option value="nr">Nauru</option><option selected="selected" value="np">Nepal</option><option value="an">Netherlands Antilles</option><option value="nl">Netherlands</option><option value="nc">New Caledonia</option><option value="nz">New Zealand</option><option value="ni">Nicaragua</option><option value="ne">Niger</option><option value="ng">Nigeria</option><option value="nu">Niue</option><option value="nf">Norfolk Island</option><option value="kp">North Korea</option><option value="mp">Northern Mariana Islands</option><option value="no">Norway</option><option value="om">Oman</option><option value="pk">Pakistan</option><option value="pw">Palau</option><option value="ps">Palestinian Territories</option><option value="pa">Panama</option><option value="pg">Papua New Guinea</option><option value="py">Paraguay</option><option value="pe">Peru</option><option value="ph">Philippines</option><option value="pn">Pitcairn Islands</option><option value="pl">Poland</option><option value="pt">Portugal</option><option value="pr">Puerto Rico</option><option value="qa">Qatar</option><option value="re">Reunion</option><option value="ro">Romania</option><option value="ru">Russia</option><option value="rw">Rwanda</option><option value="sh">Saint Helena and Dependencies</option><option value="kn">Saint Kitts and Nevis</option><option value="lc">Saint Lucia</option><option value="pm">Saint Pierre and Miquelon</option><option value="vc">Saint Vincent and the Grenadines</option><option value="ws">Samoa</option><option value="sm">San Marino</option><option value="st">Sao Tome and Principe</option><option value="sa">Saudi Arabia</option><option value="sn">Senegal</option><option value="rs">Serbia</option><option value="sc">Seychelles</option><option value="sl">Sierra Leone</option><option value="sg">Singapore</option><option value="sk">Slovakia</option><option value="si">Slovenia</option><option value="sb">Solomon Islands</option><option value="so">Somalia</option><option value="za">South Africa</option><option value="gs">South Georgia and South Sandwich Islands</option><option value="kr">South Korea</option><option value="es">Spain</option><option value="pi">Spratly Islands</option><option value="lk">Sri Lanka</option><option value="sd">Sudan</option><option value="sr">Suriname</option><option value="sj">Svalbard and Jan Mayen</option><option value="sz">Swaziland</option><option value="se">Sweden</option><option value="ch">Switzerland</option><option value="sy">Syria</option><option value="tw">Taiwan</option><option value="tj">Tajikistan</option><option value="tz">Tanzania</option><option value="th">Thailand</option><option value="tg">Togo</option><option value="tk">Tokelau</option><option value="to">Tonga</option><option value="tt">Trinidad and Tobago</option><option value="tn">Tunisia</option><option value="tr">Turkey</option><option value="tm">Turkmenistan</option><option value="tc">Turks And Caicos Islands</option><option value="tv">Tuvalu</option><option value="vi">US Virgin Islands</option><option value="ug">Uganda</option><option value="ua">Ukraine</option><option value="ae">United Arab Emirates</option><option value="uk">United Kingdom</option><option value="um">United States Minor Outlying Islands</option><option value="us">United States</option><option value="uy">Uruguay</option><option value="uz">Uzbekistan</option><option value="vu">Vanuatu</option><option value="va">Vatican City</option><option value="ve">Venezuela</option><option value="vn">Vietnam</option><option value="wf">Wallis and Futuna</option><option value="eh">Western Sahara</option><option value="ye">Yemen</option><option value="zm">Zambia</option>
                <option value="zw">Zimbabwe</option>
            </select>

            <br/>

            <label class="form_label">*College/Work:</label>
            <input class="form_input" type="text" name="colz_work" id="colz_work" value="" /><br/>
            <label class="form_label">*Website:</label>
            <input class="form_input" type="text" name="website" id="website" value="" /><br/>
            <!--<input class="form_input" type="text" name="aggrement" value="" /><br/>-->
            <p> By clicking the “Submit” button below,
                I agree to the <a href="frontend.php?page=terms">terms and conditions</a> of susudo.</p> <br/>
            <label class="form_label"></label>
            <input class="form_input" type="submit" name="submit" value="submit" /><br/>
        </form>
    </div>
</div>
<div class="clear"> </div>